<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column', padding: '8px' }">
      <a-input-search v-model:value="searchKey" placeholder="模板名称/助记码" class="mt-1" @search="onSearch" />
      <a-tabs v-model:active-key="templateType" class="mt-1">
        <a-tab-pane :key="2" tab="科室" />
        <a-tab-pane :key="0" tab="个人" />
        <a-tab-pane :key="1" tab="全院" />
        <a-tab-pane key="" tab="全部" />
      </a-tabs>
      <SuitList ref="suitListRef" :search-key="searchKey" :template-type="templateType" />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <SuitHeader />
      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-auto" :body-style="{ padding: '8px', height: '100%', overflow: 'hidden' }">
          <div class="flex justify-end">
            <a-space>
              <a-button ref="doctorAdviceRef" class="mb-2" type="primary" :disabled="!store.currentSuit.id" @click="onClickMedical"> 维护医嘱 </a-button>
              <ItemTempModal
                v-model:open="openItemModal"
                :popover-height="popoverHeight"
                :is-operation="isOperation"
                :row-data="rowData"
                @refresh="onRefresh"
              />
            </a-space>
          </div>

          <BaseTable
            fill
            :data-source="tableData"
            :loading="loading"
            column-code="000404"
            :pagination="pagination"
            row-key="id"
            :expanded-row-keys="expandedRowKeys"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'link'">
                <div class="table-link"></div>
              </template>
              <template v-if="column.dataIndex === 'type'">
                {{ ['临时', '长期', '出院带药'][record.advExecType] }}
              </template>
              <template v-if="column.dataIndex === 'cznr'">
                <!-- {{ record.adv.mc }} -->
                <PreviewCell :row-data="record" />
              </template>
              <template v-if="column.dataIndex === 'yf'"> {{ record.deliverRoute?.fyff }} </template>
              <template v-if="column.dataIndex === 'action'">
                <a-space>
                  <a-button type="link" size="small" :disabled="record.isChild" @click="onClickEdit(record)">修改</a-button>
                  <BaseButton confirm-text="确认作废?" type="text" danger size="small" @click="onClickDelete(record)"> 作废 </BaseButton>
                </a-space>
              </template>
            </template>
          </BaseTable>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
// import { post } from '@/utils/request'
import { message } from 'ant-design-vue'
import SuitHeader from '../components/SuitHeader'
import SuitList from '../components/SuitList'
import ItemTempModal from '../components/ItemTempModal'
import useSuitStore from '../suit-template/store'
import PreviewCell from './PreviewCell'

const props = defineProps({
  tabActive: {
    type: [String, Number],
    default: 2
  },
  isOperation: {
    type: Boolean,
    default: false
  }
})
const store = useSuitStore()
const searchKey = ref()
const suitListRef = ref()
const openItemModal = ref(false)
const doctorAdviceRef = ref(null)
const rowData = ref({})

const popoverHeight = ref(0)
const templateType = ref(2)
const expandedRowKeys = ref([])
const getHeigth = () => {
  const rect = doctorAdviceRef.value?.$el?.getBoundingClientRect()
  popoverHeight.value = window.innerHeight - rect.top - rect.height - 16
}
const onSearch = () => {
  suitListRef.value.getData()
}
//获取病历列表
const { loading, pagination, tableData, getData } = useTable({
  formatParams: () => ({ inpAdviceTemplateId: store.currentSuit.id }),
  url: '/inp/zyys/getInpAdviceTemplateItemList',
  formatResult: (data) => {
    return data.map((item) => ({ ...item, children: item.children?.map((child) => ({ ...child, isChild: true })) }))
  },
  onSuccess: (data) => {
    expandedRowKeys.value = data.map((item) => item.id)
  }
})
const onRefresh = () => {
  tableData.value = []
  getData()
}
watch(
  () => store.currentSuit.id,
  (val) => {
    val && getData()
  },
  { immediate: true }
)
watch(
  () => props.tabActive,
  (val) => {
    templateType.value = val
  },
  { immediate: true }
)
const onClickMedical = () => {
  rowData.value = {}
  openItemModal.value = true
}
const onClickEdit = (row) => {
  rowData.value = JSON.parse(JSON.stringify(row))
  openItemModal.value = true
}
const onClickDelete = async (row) => {
  if (row.id) {
    const { code, msg } = await post('/inp/zyys/delInpAdviceTemplateItem', { id: row.id })
    if (code !== 0) return message.error(msg)
    message.success('作废成功')
    getData()
  }
}

onMounted(() => {
  getHeigth()
})
</script>
<style lang="less" scoped>
:deep(.ant-radio-button-wrapper) {
  padding: 0 25px;
}
:deep(.ant-input-clear-icon) {
  display: none;
}
:deep(.ant-table-row-expand-icon) {
  display: none;
}
:deep(.ant-table-row-indent) {
  display: none;
}
</style>
